<template>
	<div class="box pageBox">
		<div class="userMessage">
			<div class="username">
				<span class="userLeft"><img src="../assets/head.jpg"/>用户名：{{list.nick_name}}</span>
				（ <span>状态：<a-badge v-if="list.is_active=='冻结'" status="default" class="badge"/><a-badge v-if="list.is_active=='有效'" status="success" class="badge"/>{{list.is_active}}</span> ）
				<span class="userRight">
					<a-button @click="freeze">冻结</a-button>
					<a-button @click="Delete">删除</a-button>
					<a-button type="primary">导出</a-button>
				</span>
			</div>
			<div class="realMessage">
				<div class="realLeft">
					<div class="first">
						<span>姓名：{{list.name}}</span>
						<span>邀请好友：324人</span>
						<span>邮箱：{{list.email}}</span>
					</div>
					<div>
						<span>手机号：{{list.mobile_phone}}</span>
						<span>偷矿功能：
							<a-badge v-if="list.steal_status=='关闭'" status="default" class="badge"/><a-badge v-if="list.steal_status=='开启'" status="success" class="badge"/>{{list.steal_status}}
						</span>
						<span>注册时间：{{list.create_date}}</span>
					</div>
				</div>
				<div class="realRight">
					<div>
						<span>算力</span>
						<span class="big">{{list.hashrate}}</span>
					</div>
					<div class="end">
						<span>钱包</span>
						<span class="big">{{list.wallet}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="userMessage">
			<div class="top">
				<h2>信息报告</h2>
			</div>
			<div class="realMessage">
				<div class="realLeft" style="float: none;">
					<div class="first">
						<span>身份证号：{{list.identity_number}}</span>
						<span>银行卡号：{{list.card_number}}</span>
					</div>
					<div>
						<span>微信：sdfaslfa</span>
						<span>发卡行：{{list.bank_name}}</span>
					</div>
				</div>
				<div class="approve">
					<span>人脸报告：<a-badge status="success" class="badge"/>已认证<a>报告查询</a></span>
					<span>支付宝/淘宝认证：<a-badge status="default" class="badge"/>未认证<a>报告查询</a></span>
					<span>手机运营商：<a-badge status="success" class="badge"/>已认证<a>报告查询</a></span>
				</div>
			</div>
		</div>
		<div class="top">
			<h2>钱包</h2>
		</div>
		<a-table :pagination="show" :dataSource="dataSource" :columns="columns" class="table">
		</a-table>
		<div class="paging">
            <div class="total">共 {{total}} 条记录 第 {{par.pageSize}} / {{allPage}} 页</div>
            <a-pagination 
                showQuickJumper 
                showSizeChanger  
                :defaultCurrent="1" 
                :defaultPageSize="par.limit" 
                :total = total  
                @change="onChange"  
            />
        </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataSource: [],
				columns: [{
						title: '来源',
						dataIndex: 'type',
					}, {
						title: '数量',
						dataIndex: 'power',
					}, {
						title: '时间',
						dataIndex: 'create_date',
					},
				],
				show: false,
				par: {
					id: ''
				},
				list: {},
				total:0,
				allPage:'',
			}
		},
		created() {			
			this.par.id = this.$route.params.id;
			this.$ajax
				.get("/kmd-field-web/um/queryDetailUserById", {
					params: this.par
				})
				.then(res => {
					this.list = res.data;
					this.dataSource = res.data.powerList
					this.total = res.data.powerList.length
				})
		},
		methods: {
			onChange(pageNumber) {
				// console.log(pageNumber)
			},
			freeze() {
				this.par.id = this.$route.params.id;
				let that = this;
				this.$confirm({
					title: '操作确认',
					content: '你确定要冻结该用户吗？',
					onOk: () => {
						that.$ajax
							.post("/kmd-field-web/um/blockedAccountById", that.par)
							.then(res => {
								if(res.status == 200) {
									that.$message.success('冻结成功!')
								} else {
									that.$message.error('冻结失败!');
								}
							})
					},
					onCancel: () => {}
				});
			},
			//删除
			Delete() {
				this.par.id = this.par.id = this.$route.params.id;
				let that = this
				this.$confirm({
					title: '操作确认',
					content: '你确定要删除该用户吗？',
					onOk: () => {
						that.$ajax
							.post("/kmd-field-web/um/deleteById", that.par)
							.then(res => {
								if(res.status == 200) {
									that.$message.success('删除成功!')
									history.go(-1);
								} else {
									that.$message.error('删除失败');
								}
							})
					},
					onCancel: () => {}
				});
			},
		},
		watch: {
			list(newL) {
				if(this.list.is_active == 2) {
					this.list.is_active = "有效";
				} else {
					this.list.is_active = "冻结";
				}
				if(this.list.steal_status == 2) {
					this.list.steal_status = "开启";
				} else {
					this.list.steal_status = "关闭";
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.userMessage {
		margin-top: 25px;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #CCCCCC;
		.username {
			width: 100%;
			.userLeft {
				font-size: 26px;
				font-weight: 600;
				margin-right: 10px;
				img {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-right: 10px;
					vertical-align: -12px;
				}
			}
			.userRight {
				float: right;
			}
		}
		.realMessage {
			margin-top: 20px;
			width: 100%;
			overflow: hidden;
			.realLeft {
				float: left;
				overflow: hidden;
				div {
					float: left;
					span {
						display: block;
						margin-bottom: 15px;
					}
					.badge {
						display: inline;
					}
				}
				.first {
					margin-left: 60px;
					margin-right: 100px;
				}
			}
			.realRight {
				float: right;
				overflow: hidden;
				div {
					float: left;
					span {
						display: block;
						margin-bottom: 10px;
						text-align: right;
					}
					.big {
						font-size: 20px;
						font-weight: 500;
					}
				}
				.end {
					margin-left: 50px;
				}
			}
		}
	}
	
	.approve {
		margin-left: 60px;
		margin-bottom: 15px;
		span {
			margin-right: 135px;
			a {
				margin-left: 10px;
			}
		}	
		.badge{
			display: inline;
			margin: 0;
		}	
	}
	
</style>